<html>

<head>
    <meta charset="utf-8" name="referrer" content="strict-origin-when-cross-origin">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>02-加载常用控件（一）</title>
    <script src="../../../assets/ol/v5.3.0/ol.js"></script>
    <script src="../../../assets/script/jquery-2.1.1.min.js"></script>
    <link rel="stylesheet" href="../../../assets/ol/v5.3.0/ol.css">
    <style>
        #map {
            width: 80%;
            height: 800px;
        }
    </style>
</head>
<body>
    <div class="control-div">
        <input type="button" class="control-btn" id="zoom-out" value="单击缩小" />
        <input type="button" class="control-btn" id="zoom-in" value="单击放大" />
        <input type="button" class="control-btn" id="panto" value="平移" />
        <input type="button" class="control-btn" id="restore" value="复位" />
    </div>
    <div id="map"></div>
</body>
<script>
    const map = new ol.Map({
        target: "map",
        loadTilesWhileInteracting: true,
        layers: [
            new ol.layer.Tile({
                title: "天地图矢量图层",
                source: new ol.source.XYZ({
                    url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=814b8c2e364057ee36a9af0028af0620",
                })
            }),
            new ol.layer.Tile({
                title: "天地图注记图层",
                source: new ol.source.XYZ({
                    url: "http://t4.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=814b8c2e364057ee36a9af0028af0620",
                })
            })
        ],
        view: new ol.View({
            center: [0, 0],
            zoom: 3
        })
    })
    // 地图视图初始参数
    const view = map.getView()
    const zoom = view.getZoom()
    const center = view.getCenter()
    const rotation = view.getRotation()
    // 缩小按钮
    document.getElementById("zoom-out").onclick = function () {
        const view = map.getView() // 获取地图视图
        const zoom = view.getZoom()
        view.setZoom(zoom - 1)
    }
    //放大按钮
    document.getElementById("zoom-in").onclick = function () {
        const view = map.getView()
        const zoom = view.getZoom()
        view.setZoom(zoom + 1)
    }
    // 平移功能
    document.getElementById("panto").onclick = function () {
        const view = map.getView()
        const wh = ol.proj.fromLonLat([105, 35]) // 平移位置
        view.setCenter(wh)
        view.setZoom(5)
    }
    // 复位功能
    document.getElementById("restore").onclick = function () {
        const view = map.getView()
        view.setCenter(center)
        view.setRotation = rotation
        view.setZoom = zoom
    }
    //为内置的缩放控件与旋转控件添加tool-tip提示信息
    $('.ol-zoom-in, .ol-zoom-out').tooltip({
        placement: 'right' // tooltip在右侧显示
    })
    //为内置的缩放控件与旋转控件添加tool-tip提示信息
    $('.ol-rotate-reset, .ol-attribution button[title]').tooltip({
        placement: 'left' // tooltip在左侧显示
    })
</script>

</html>